<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="referrer" content="no-referrer" /> 
	<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
	<title>wxofficial--首页预告片</title>

    <link href="https://cdn.bootcdn.net/ajax/libs/dplayer/1.9.1/DPlayer.min.css" rel="stylesheet">
	<style type="text/css">
		*{ padding: 0; margin: 0; font-family: Microsoft YaHei }
		ul, li, ol, li { list-style: none }
		a { text-decoration: none; }
		a:link {color:#000;} 
		a:visited {color:#001ba0;} 
		a:hover {color:#001ba0; text-decoration: underline;} 
		a:active {color:#600090; text-decoration: none;}
        html,body {
            width: 100%;
            position: relative;
        }

        .header{
            background: #000;
            color: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 5rem;
            padding: 0 1rem;
        }
        .header a {
            display: block;
            text-align: center;
            line-height: 2rem;
            width: 5rem;
            height: 2rem;
            background: transparent;
            border: 0;
            border: 1px solid #fff;
            border-radius: .5rem;
            color: #fff;
        }

        .movie{
            width: 100%;
            padding-bottom: 1rem;
        }

        .movie img {
            width: 100%;
        }

        .movie .show_deatil {
            background: transparent;
            color: #abcdef;
            border: 0;
            outline: none;
            background: #eee;
            width: 100%;
            text-align: left;
            line-height: 2rem;
            padding-left: .5rem;
            margin-top: .5rem;
        }

        .movie .movie_detail div{
            margin: .5rem 0;
        }
        .movie_title, .movie_summary, .movie_detail, .update_time {
            padding: 0 .5rem;
        }

        .video_mask {
            position: fixed;
            width: 100%;
            height: 100vh;
            background: rgba(200, 200, 200, .5);
            top: 0;
            display: none;
            align-items: center;
            z-index: 10;
        }
        #dplayer {
            width: 100%;
            position: fixed;
            top: 50%;
            left: 50%;
            z-index: 999;
            transform: translate(-50%, -50%);
        }
	</style>

</head>
<body>
	<div class="container">
        <div class="header">
            <div class="title">电影首页预告片</div>
            <div class="search">
                <a href="<%= url %>/search">搜索</a>
            </div>
        </div>
        <div class="main">
            <% data.forEach(item => { %>
                <div class="movie">
                    <img class="movie_cover" src="<%= qiniuZone %>/<%= encodeURI(item.posterKey) %>"
                      cover="<%= qiniuZone %>/<%= encodeURI(item.coverKey) %>" 
                      video="<%= qiniuZone %>/<%= encodeURI(item.videoKey) %>"
                      doubanId = "<%= item.doubanId %>"
                    >
                    <div class="movie_info">
                        <h2 class="movie_title"><%= item.title %></h2>
                        <div class="movie_summary">&nbsp;&nbsp;&nbsp;&nbsp;<%= item.summary %></div>
                        <details class="movie_detail">
                            <summary>点击查看详情</summary>
                            <div>导演：<%= item.directors %></div>
                            <div>主演：<%= item.casts %></div>
                            <div>评分：<%= item.rating %></div>
                            <div>类型：<%= item.genre %></div>
                            <div>上映时间：<%= item.releaseDate %></div>
                            <div>片长：<%= item.runtime %></div>
                        </details>                        
                    </div>
                    <div class="update_time"><%= Math.ceil((Date.now() - item.createTime)/86400000) %>天前更新</div>
                </div>
            <% }) %>
        </div>
    </div>
    
    <div class="video_mask" id="video_mask"></div>
    <div id="dplayer"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/dplayer/1.9.1/DPlayer.min.js"></script>
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script>
        const movie_cover = document.getElementsByClassName("movie_cover")
        const video_mask = document.getElementById("video_mask")
        const video_container = document.getElementById('dplayer')
        let dp = null
        for (let i=0; i<movie_cover.length; i++) {
            movie_cover[i].onclick = function () {
                const cover = this.getAttribute("cover").split("/").slice(-1).join("")!="undefined"?this.getAttribute("cover"):""
                const video = this.getAttribute("video").split("/").slice(-1).join("")!="undefined"?this.getAttribute("video"):""
                const doubanId = this.getAttribute("doubanId")
                if (!cover && !video) {
                    alert("该视频没有预告片QWQ")
                    return false
                }
                video_mask.style.display = "block"
                video_container.style.display = "block"
                if( !dp ) {
                    dp = new DPlayer({
                        element: document.getElementById('dplayer'),
                        video: {
                            url: video,
                            pic: cover,
                            thumbnails: cover,
                        },
                        // danmaku: {
                        //     id: doubanId,
                        //     api: 'http://localhost:3009/v3/'
                        // },
                    });
                } else {
                    dp.switchVideo(
                        {
                            url: video,
                            pic: cover,
                            thumbnails: cover,
                        },
                        // {
                        //     id: doubanId,
                        //     api: 'http://localhost:3009/v3/',
                        //     maximum: 3000,
                        //     user: 'DIYgod',
                        // }
                    );
                }
            }
        }
        video_mask.addEventListener("click", function () {
            video_mask.style.display = "none"
            dp.pause()
            video_container.style.display = "none"
        }, true)

        wx.config({
		  debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
		  appId: "<%= appID %>", // 必填，公众号的唯一标识
		  timestamp: "<%= timestamp %>", // 必填，生成签名的时间戳
		  nonceStr: "<%= noncestr %>", // 必填，生成签名的随机串
		  signature: "<%= signature %>",// 必填，签名
		  jsApiList: [
		  	"updateAppMessageShareData"
		  ] // 必填，需要使用的JS接口列表
        });
        wx.ready(function(){
            wx.updateAppMessageShareData({ 
                title: '预告片首页，冲！！', // 分享标题
                desc: '最新预告片', // 分享描述
                link: '<%= url %>' + '/index', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: 'https://i0.hdslb.com/bfs/live/new_room_cover/efce8e6292e167c31eafd510de2b4885113fe7a8.jpg@206w_116h_1c_100q.webp', // 分享图标
                success: function () {
                },
                cancel: function () {
                }
            })
        })
    </script>
</body>
</html>